<template>
  <div>
    <!-- 会员查询   -->
    <el-form :inline="true" size="small" ref="memberForm" :model="memberSearch" class="demo-form-inline">
        <el-form-item prop="id">
            <el-input v-model.trim.number="memberSearch.id" placeholder="会员id"></el-input>
        </el-form-item>
        <el-form-item prop="cardNum">
            <el-input v-model.trim="memberSearch.cardNum" placeholder="会员卡号"></el-input>
        </el-form-item>
        <el-form-item prop="name">
            <el-input v-model.trim="memberSearch.name" placeholder="会员名称"></el-input>
        </el-form-item>
        <el-form-item prop="payType">
            <el-select v-model.trim="memberSearch.payType" placeholder="支付类型" style="width:110px;">
                <el-option v-for="(item) in payType" :key="item.id" :label="item.name" :value="item.type"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item prop="birthday">
            <el-date-picker style="width:150px;" v-model.trim="memberSearch.birthday" value-format="yyyy-MM-hh" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="searchMember">查询</el-button>
            <el-button type="primary" icon="el-icon-edit" @click="openDialog">新增</el-button>
            <el-button @click="resetForm('memberForm')">重置</el-button>
        </el-form-item>
    </el-form>
    <!-- 会员列表 -->
    <el-table :data="memberList" border height="380" style="width: 100%">
      <el-table-column type="index" label="序号" width="60"> </el-table-column>
      <el-table-column prop="cardNum" label="会员卡号"> </el-table-column>
      <el-table-column prop="name" label="会员姓名"> </el-table-column>
      <el-table-column prop="birthday" label="会员生日"> </el-table-column>
      <el-table-column prop="phone" label="手机号码" width="110"> </el-table-column>
      <el-table-column prop="integral" label="可用积分"> </el-table-column>
      <el-table-column prop="money" label="开卡金额"> </el-table-column>
      <el-table-column prop="payType" label="支付类型">
        <template slot-scope="scope">
          {{ scope.row.payType | filterPayType }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="会员地址" width="180"> </el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="openEditDialog(scope.row.id)">
              编辑
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)">
              删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 会员分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <!-- 新增弹窗 -->
    <el-dialog title="会员新增" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="addMemberForm" :rules="rules" ref="addMemberForm" label-width="100px" label-position="right" style="width:400px">
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model.trim.number="addMemberForm.cardNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" prop="name">
          <el-input v-model.trim="addMemberForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员生日" prop="birthday">
         <el-date-picker style="width:150px" v-model="addMemberForm.birthday" value-format="yyyy-MM--dd" type="date" placeholder="请点击选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model.trim.number="addMemberForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开卡金额" prop="money" >
          <el-input v-model.trim.number="addMemberForm.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可用积分" prop="integral">
          <el-input v-model.trim.number="addMemberForm.integral"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="payType" >
          <el-select v-model="addMemberForm.payType" style="width:150px" placeholder="请点击选择">
            <el-option :label="item.name" v-for="(item,index) in payType" :key="index" :value="item.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input type="textarea" v-model.trim="addMemberForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button type="primary" @click="submitMemberForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹窗 -->
    <el-dialog title="会员编辑" :visible.sync="editDialogFormVisible" width="500px">
      <el-form :model="editMemberForm" :rules="rules" ref="editMember" label-width="100px" label-position="right" style="width:400px">
        <el-form-item label="会员卡号" prop="cardNum">
          <el-input v-model.trim="editMemberForm.cardNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员姓名" prop="name">
          <el-input v-model.trim="editMemberForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="会员生日" prop="birthday">
         <el-date-picker style="width:150px" v-model="editMemberForm.birthday" value-format="yyyy-MM--dd" type="date" placeholder="请点击选择"></el-date-picker>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model.trim="editMemberForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="开卡金额" prop="money" >
          <el-input v-model.trim="editMemberForm.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="可用积分" prop="integral">
          <el-input v-model.trim="editMemberForm.integral"  autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="支付类型" prop="payType" >
          <el-select v-model="editMemberForm.payType" style="width:150px" placeholder="请点击选择">
            <el-option :label="item.name" v-for="(item,index) in payType" :key="index" :value="item.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="会员地址" prop="address">
          <el-input type="textarea" v-model.trim="editMemberForm.address"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditMember">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import memberApi from "../../api/member";
let payType = [
  {
    type: 1,
    name: "现金",
  },
  {
    type: 2,
    name: "微信",
  },
  {
    type: 3,
    name: "支付宝",
  },
  {
    type: 4,
    name: "银行卡",
  },
];
export default {
  name: "",
  data() {
    return {
      editDialogFormVisible : false,
      page: 1,
      size: 10,
      total : 0,
      memberSearch: {
        id: "",
        cardNum: "",
        name: "",
        payType: "",
        birthday: "",
      },
      payType : payType,
      memberList: [],
      //控制弹窗的显示与隐藏
      dialogFormVisible : false,
      addMemberForm : {
        cardNum : "",
        name : "",
        birthday : "",
        phone : "",
        money : "",
        integral : "",
        payType : "",
        address : ""
      },
      editMemberForm : {
        cardNum : "",
        name : "",
        birthday : "",
        phone : "",
        money : "",
        integral : "",
        payType : "",
        address : ""
      },
      rules : {
        cardNum : [
          {required : true, message : "卡号不能为空", trigger: "blur"}
        ],
        name : [
          {required : true, message : "姓名不能为空", trigger: "blur"}
        ],
        birthday : [
          {required : true, message : "生日不能为空", trigger: "change"}
        ],
        phone : [
          {required : true, message : "手机号不能为空", trigger: "blur"}
        ],
        money : [
          {required : true, message : "金额不能为空", trigger: "blur"}
        ],
        integral : [
          {required : true, message : "积分不能为空", trigger: "blur"}
        ],
        payType : [
          {required : true, message : "姓名不能为空", trigger: "change"}
        ],
        address : [
          {required : true, message : "地址不能为空", trigger: "blur"}
        ]
      }
    };
  },
  created() {
    this.init();
  },
  filters: {
    filterPayType(val) {
      let data = payType.find((item, index) => {
        return item.type == val;
      });
      return data.name || "";
    },
  },
  methods: {
    //初始化会员数据
    init() {
      memberApi
        .getMemberList(this.page, this.size, this.memberSearch)
        .then((response) => {
          console.log(response);
          if (response.data.flag) {
            this.memberList = response.data.data.rows;
            this.total = response.data.data.total;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    //页面发生变化触发的方法
    handleCurrentChange(val){
        this.page = val;  // 2 //3 
        this.init()
    },
    //条数变化触发的方法
    handleSizeChange(val){
        this.size = val;
        this.init()
    },
    //删除数据方法
    handleDelete(id){
        memberApi.deleteMember(id).then(response=>{
            console.log(response)
            if(response.data.flag){
                this.$message("删除成功");
                this.init();
            }
        }).catch(error=>{
            console.log(error)
        })
    },
    //查询会员方法
    searchMember(){
        this.init();
        // console.log(this.memberSearch)
    },
    //重置表单方法
    resetForm(formName){
        this.$refs[formName].resetFields();
    },
    //打开弹窗方法
    openDialog(){
      this.dialogFormVisible = true;
      this.$nextTick(()=>{
        this.$refs["addMemberForm"].resetFields()
      })
    },
    //取消弹窗方法
    cancelDialog(){
      // this.$refs["addMemberForm"].resetFields()
      this.dialogFormVisible = false;
    },
    //提交新增会员的数据
    submitMemberForm(){
      this.$refs["addMemberForm"].validate(valid=>{
        if(valid){
          memberApi.addMemberData(this.addMemberForm).then(response=>{
            console.log(response)
            if(response.data.flag){
              this.$message("会员新增成功");
              this.dialogFormVisible = false;
              //重新获取一下最新的数据,并重新渲染
              this.init();
            }else{
              this.$message("会员新增失败");
            }
          }).catch(error=>{
            console.log(error)
          })
        }
      })
    },
    //打开编辑弹窗
    openEditDialog(id){
      console.log(id)
      memberApi.findMember(id).then(response=>{
        console.log(response)
        if(response.data.flag){
          this.editMemberForm = response.data.data.rows[0]
          let data = payType.find((item, index) => {
            return item.type == response.data.data.rows[0].payType;
          });
          this.editMemberForm.payType = data.name
        }else{
          this.$message("会员数据查询失败")
        }
      }).catch(error=>{
        console.log(error)
      })
      this.editDialogFormVisible = true;
    },
    //提交修改表单的数据
    submitEditMember(){
        this.$refs["editMember"].validate(valid=>{
          if(valid){
            memberApi.editMemberFormData(this.editMemberForm.id,this.editMemberForm).then(response=>{
              console.log(response)
              if(response.data.flag){
                this.$message("修改会员成功");
                this.editDialogFormVisible = false;
                this.init()
              }else{
                this.$message("修改会员失败");
              }
            }).catch(error=>{
              console.log(error)
            })
          }
        })
      }
  },
  components: {},
};
</script>

<style scoped>
.el-form{
    margin-top:20px;
}
</style>
